* {
  box-sizing: border-box !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #fafafa;
  font-family: Arial, sans-serif !important;
  font-size: 16px;

  --black-color-0: #ffffff;
  --black-color-1: #f6f7f8;
  --black-color-2: #e5e7e9;
  --black-color-3: #d4d7da;
  --black-color-4: #c0c3c6;
  --black-color-5: #aab0b3;
  --black-color-6: #94999c;
  --black-color-7: #7f8487;
  --black-color-8: #6a6f72;
  --black-color-9: #54585a;
  --black-color-10: #3f4344;
  --black-color-11: #2a2e30;
  --black-color-12: #141718;
  --black-color-13: #000000;

  --main-color: #333333;
  --gray-color: #555555;
  --primary-color: #409eff;
  --danger-color: #f56c6c;
  --warning-color: #e6a23c;
  --success-color: #67c23a;
  --info-color: #8896b3;

  --border-bash-color: #e5e5e5;
  --border-light-color: #e5e7e9;
  --border-lighter-color: #f5f7fa;

  --bg-color: #e6f7ff;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-danger {
  color: var(--danger-color) !important;
}

.text-warning {
  color: var(--warning-color) !important;
}

.text-success {
  color: var(--success-color) !important;
}

.text-info {
  color: var(--info-color) !important;
}
